import type { DescriptionsProps, TableProps } from 'antd';
import { Descriptions, Drawer, Image, Space, Table } from 'antd';
import { useState } from 'react';
import api from './request';
export interface Props {
  isShow: boolean;
  data: any;
  onCancel: () => void;
}

export default function CustomerDetail(props: Props) {
  const { isShow, data } = props;

  const [info, setInfo] = useState<Partial<OrderListManagementApi.InfoResponse>>({});

  const goodsInfo: DescriptionsProps['items'] = [
    {
      label: '订单号',
      children: <p>{info.orderNo}</p>,
    },
    {
      label: '手机号码',
      children: <p>{info.userPhone}</p>,
    },
    {
      label: '订单状态',
      children: <p>{info.orderStatus}</p>,
    },
    {
      label: '支付状态',
      children: <p>{info.paymentStatus}</p>,
    },
    {
      label: '支付方式',
      children: <p>{info.paymentMethod}</p>,
    },
    {
      label: '订单时间',
      children: <p>{info.orderTime}</p>,
    },
    {
      label: '优惠金额',
      children: <p>{info.discountAmount}</p>,
    },
    {
      label: '实际金额',
      children: <p>{info.actualAmount}</p>,
    },
    {
      label: '积分',
      children: <p>{info.points}</p>,
    },
    {
      label: '预约时间',
      children: <p>{info.reservationTime}</p>,
    },
    {
      label: '数量',
      children: <p>{info.sumQuantity}</p>,
    },
  ];
  const deliveryInfo: DescriptionsProps['items'] = [
    {
      label: '快递单号',
      children: <p>{info.orderDeliveryOutput?.deliveryOrderNumber}</p>,
    },
    {
      label: '快递名',
      children: <p>{info.orderDeliveryOutput?.expressName}</p>,
    },
  ];
  const addressInfo: DescriptionsProps['items'] = [
    {
      label: '收货人',
      children: <p>{info.orderDeliveryInfoOutput?.deliveryUser}</p>,
    },
    {
      label: '收货电话',
      children: <p>{info.orderDeliveryInfoOutput?.deliveryPhone}</p>,
    },
    {
      label: '收获地址',
      children: <p>{info.orderDeliveryInfoOutput?.deliveryAddress}</p>,
    },
  ];

  const getInfo = async (params: OrderListManagementApi.InfoParams) => {
    const info = await api.getInfo(params);

    setInfo(info);
  };

  const onOpenChange = (open: boolean) => {
    if (open) {
      if (data && data.orderID) {
        getInfo({ OrderId: data.orderID });
      }
    } else {
      setInfo({});
      props.onCancel?.();
    }
  };
  const columns: TableProps['columns'] = [
    {
      title: '商品图片',
      dataIndex: 'propertyIcon',
      ellipsis: true,
      align: 'center',
      render(_, data) {
        return <Image width={120} src={data.propertyIcon} />;
      },
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '规格名称',
      dataIndex: 'skuname',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '数量',
      dataIndex: 'quantity',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '商品单价',
      dataIndex: 'goodsPrice',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '单价',
      dataIndex: 'unitPrice',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '总价',
      dataIndex: 'totalPrice',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '积分',
      dataIndex: 'points',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '优惠金额',
      dataIndex: 'discountAmount',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '实际金额',
      dataIndex: 'actualAmount',
      ellipsis: true,
      align: 'center',
    },
  ];
  return (
    <Drawer
      destroyOnClose
      footer={null}
      open={isShow}
      title={'订单详情'}
      width={1080}
      bodyStyle={{ padding: '15px  30px' }}
      onClose={() => onOpenChange(false)}
    >
      <Space direction="vertical" size="large">
        <Descriptions title="基本信息" items={goodsInfo} />
        <Descriptions title="快递信息" items={deliveryInfo} />
        <Descriptions title="收货信息" items={addressInfo} />
        <Descriptions title="商品信息" items={[]} />
        <Table columns={columns} />
      </Space>
    </Drawer>
  );
}
